<script setup lang="ts">
//  书写Vue的代码语法

//导入响应式数据
import { ref } from 'vue';
let num = ref(100);
const fu = () => {
  num.value++;
  console.log(num.value);

}
</script>

<template>
  <div>
     <h1>主页面</h1>
     <h1>Vue基本语法</h1>
     <ul>
      <li>Vue是一个单页面应用程序,Vue的页面都是单文件组件   数据驱动视图</li>
      <li>Vue的页面都是单文件组件:template(标签),script(js),style(样式)</li>
      <li>
        Vue语法:html模版语法：1、插值语法{{}}  2、指令
      </li>
        <li>Vue中声明的数据应该是响应式数据：数据变化时，视图自动更新</li>
        <li>import{ref} from 'vue'  ref()函数用来声明响应式数据</li>
    <li>num:{{ num }}</li>
    
      </ul>
<input type="button" value="修改num数值" v-on:click="fu"/>

  </div>
  <main>
    <TheWelcome />
  </main>
</template>
